<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>酒店入住</title>
  <link href="css/css.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="iconfont/iconfont.css">
</head>

<body>
  <header>
    <div class="head_c">
      <!--头部-->
      <div class="top">
        <div class="top_left">欢迎光临悠游行！</div>
        <div class="top_right" style="display: flex;" id="login_signup_area">
          <div class="top_right"><a href="login.html">登录</a><a href="zhuce.html">注册</a></div>
        </div>
        <div class="top_right" style="display: flex;" id="logout_area">
          <a class="top_right" id="login_info" style="font-weight: bold;">用户：15159241643</a>
          <div class="top_right logout_button" onclick="logout()">退出登录</div>
        </div>
      </div>
    </div>
  </header>

  <!--导航-->
  <nav>
    <ul>
      <li><a href="index.html">网站首页</a></li>
      <li><a href="jingdian.html">著名景点</a></li>
      <li><a href="luxian.html">推荐路线</a></li>
      <li class="on"><a href="jiudian.html">酒店入住</a></li>
      <li><a href="luntan.html">论坛热帖</a></li>

    </ul>
  </nav>

  <!--banner-->
  <div class="banner"></div>
  <div class="jiudian1">
    <div class="jingdian_tittle">酒店入住</div>
    <div class="jiudian1_list">
      <div class="left_button" id="left_button" onclick="display_prev_page()">
        <span class="iconfont" style="margin: 0 auto; font-size: 40px;">&#xe660;</span>
      </div>
      <div class="right_button" id="right_button" onclick="display_next_page()">
        <span class="iconfont" style="margin: 0 auto; font-size: 40px;">&#xe65f;</span>
      </div>
      <ul id="hotel_list">
      </ul>
    </div>
  </div>
  <div class="modal-wrapper hidden" id="float_area">
    <div class="modal">
      <h2 style="width:100%; text-align:center; line-height:40px;" id="text_float"></h2>
      <button style="margin: 25px auto 0px auto; justify-self: center;" id="text_float_close"
        onclick="float_area_close()">关闭</button>
    </div>
  </div>

  <div class="modal-wrapper float_window" id="float_window">
  </div>
  <footer>悠游行</footer>
</body>

</html>


<script src="./js/utils.js"></script>
<script>
  display_login_info();
  now_page = 1;
  display_now_page();
  function display_prev_page() {
    if (now_page > 1) now_page--;
    display_now_page();
  }
  function display_next_page() {
    now_page++;
    display_now_page();
  }
  function select_hotel(id) {
    setCookie("selected_hotel_id", id);
    window.location.href = "jiudian-jieshao.html";
  }
  function delete_hotel_tip(id, name) {
    float_window(
      `<div class="modal">
            <h2 style="width:100%; text-align:center; line-height:40px;" id="text_float">确认删除酒店【${name}】？</h2>
            <button style="margin: 25px auto 0px auto; justify-self: center;" id="text_float_close"
                onclick="delete_hotel(${id})">确认</button>
              <br>
            <button style="margin: 25px auto 0px auto; justify-self: center;" id="text_float_close"
                onclick="hide_float_window()">取消</button>
        </div>
      `
    );
  }
  async function delete_hotel(id) {
    api = baseUrl2 + `/hotel/delete?id=${id}`;
    await fetch(api, {
      method: "DELETE",
      headers: {
        Authorization: getCookieValue("token"),
      },
    }).then(response => response.json())
      .then(data => {
        console.log(data);
        if (data["code"] == 200) {
          hide_float_window();
          display_now_page();
          show_float_text("删除成功");
        } else {
          show_float_text("删除失败");
        }
      }).catch(error => {
        console.error(error);
        hide_float_window();
      })
  }

  function display_now_page() {
    //显示6个酒店
    api = baseUrl2 + `/hotel/getPage?pageNum=${now_page}&pageSize=6`;
    fetch(api, {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
      }
    }).then(response => response.json()).then(data => {
      console.log(data);
      list = data["data"];
      table = document.querySelector("#hotel_list");
      table.innerHTML = "";
      for (item of list) {
        table.innerHTML += `
        <li class="${isAdmin() ? "delete_button_parent" : ""} hover_color_change">
          <button class="float_small_button" onclick="delete_hotel_tip(${item.id},'${item.name}')">删除</button>
          <div onclick="select_hotel(${item.id})">
            <img src="${item.imagePath ?? ""}" style="width: 387px; height: 261px;" alt="" /><p>${item.name}</p>
          </div>
        </li>
        `
      }
      if (list.length === 0 && now_page > 1) {
        display_prev_page();
      }

    }).catch(error => {
      console.error(error);
    })
  }
</script>